<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>voip</title>
    <style>
        body {
            margin: 0px;
            padding: 0px;
        }

        .tab {
           /*
		width: 100%;
            height: 100%; */
	    width:900px;
	    height:600px;
            /* 设置背景颜色，背景图加载过程中会显示背景色 */
            background-color: #464646;
        }

        #mainTab {
            background-image: url(images/bg.jpg);
            background-position: center center;
            background-attachment: fixed;
            background-size: 100% 100%;

        }

        .loginInfo {
            padding-top: 50px;
        }

        .userId {
            color: white;
            text-align: center;
            font-size: 16px;
        }

        .backButton {
            padding: 20px 0px 0px 0px;
            text-align: center;
            font-size: 20px;
            width: 200px;
            height: 50px;
            background-color: black;
            color: white;
            cursor: pointer;
        }

        .contentcontent {
            background-color: #67CF22;
        }

        .topic {
            border-radius: 20px;
            margin: 30px auto 30px auto;
            padding: 20px 0px 0px 0px;
            text-align: center;
            font-size: 20px;
            color: white;
            width: 400px;
            height: 50px;
            background-color: #3dc25a;
            cursor: pointer;
        }

        .logintopic {
            margin: 5px auto 5px auto;
            padding: 0px 0px 0px 0px;
            text-align: center;
            font-size: 20px;
            color: white;
            width: 50px;
            height: 30px;
            background-color: #B22222;
            cursor: pointer;
        }

        .button2 {
            height: 30px;
            background-color: transparent;
            text-align: center;
            line-height: 30px;
            cursor: pointer;
            border: inset;
            border-width: 1px;
            border-color: transparent;
            border-bottom-color: #e5e5ce;
        }

        .left {
            float: left;
            width: 10%;
            height: 100%;
            background-color: #ffffff;
        }

        .left .backButton {
            width: 100%;
        }

        .right {
            float: right;
            width: 90%;
            height: 100%;
        }

        .title {
            padding: 20px 0px 0px 0px;
            text-align: center;
            font-size: 20px;
            width: 100%;
            height: 50px;
            background-color: #464646;
            color: #ffffff;
        }

        .messageButton {
            position: absolute;
            right: 20px;
            bottom: 20px;
            width: 100px;
            height: 100px;
            margin: auto;
            z-index: 1;
        }

        #videoMeetingZone {
            width: 100%;
            margin: 0px auto 0px auto;
            background-color: #464646;
        }

        .msgBubble {
            text-align: left;
            word-wrap: break-word;
            -moz-border-radius: 10px;
            -webkit-border-radius: 10px;
            border-radius: 10px;
            padding: 5px;
            margin: 5px auto 5px auto;
        }

        .circle {
            border-radius: 50%;
            -moz-border-radius: 50%;
            -webkit-border-radius: 50%;
            text-align: center;
            font-size: 20px;
        }

        .videoToolBar {
            position: absolute;
            left: 0;
            top: 0;
            right: 0;
            width: 100%;
            height: 30px;
            line-height: 30px;
        }

        .videoToolBarIcon {
            display: inline-block;
            width: 18px;
            height: 18px;
            margin-top: 6px;
            background-position: center center;
            background-size: 18px 18px;
            background-repeat: no-repeat;
            cursor: pointer;
        }
    </style>
    <link rel="stylesheet" type="text/css" href="css/effect.css">
    <link rel="stylesheet" type="text/css" href="jquery-ui.min.css">
    <script type="text/javascript" src="./sdk/webRTC/adapter.js"></script>
    <script type="text/javascript" src="jquery-3.2.1.min.js"></script>
    <script type="text/javascript" src="jquery-ui.min.js"></script>
    <script type="text/javascript" src="msg_box_plugin.js"></script>
    <script type="text/javascript" src="./sdk/star_rtc_video.min.js"></script>
    <script type="text/javascript" src="./sdk/star_rtc_lib.min.js"></script>
    <script type="text/javascript" src="cookie_tools.js"></script>
    <script type="text/javascript" src="voip.js"></script>
</head>
<body>
<div id="mainTab" class="tab">
    <div class="loginInfo">
        <div class="userImage">
            <div id="userImage" class="spinner">
            </div>
        </div>
        <div id="userId" class="userId">请先登录</div>
        <div id="login" class="logintopic">登录</div>
    </div>
    <div class="starServ" style="margin-top:20px">
        <p>
        <center style="color:white;">注：支持多浏览器，目前微信浏览器、safari、opera、firefox会出现能连通但是没画面的情况！</center>
        </p>
        <div id="voipButton" class="topic">一对一视频</div>
    </div>
</div>
<div id="voipTab" class="tab" style="display:none">
    <div id="voipCallDlg" title="发送1对1聊天申请">
        <p class="validateTips">向用户：<span id="calleeId"></span>发起1对1聊天申请.</p>
        <div style="margin-top:10px">
            <input type="checkbox" id="voipTypeAudioOnly"><label for="voipTypeAudioOnly">仅音频</label>
        </div>
    </div>
    <div id="voipResponseDlg" title="收到1对1聊天申请">
        <p class="validateTips">收到来自用户：<span id="callerId"></span>的<span id="callerType">视频</span>聊天申请.</p>
    </div>
    <div id="voipConnectDlg" title="正在呼叫用户">
        <div class="validateTips">
            <div class="spinner" style="width:100px;margin-top:10px;">
                <div class="rect1" style="margin-left:5px;"></div>
                <div class="rect2" style="margin-left:5px;"></div>
                <div class="rect3" style="margin-left:5px;"></div>
                <div class="rect4" style="margin-left:5px;"></div>
                <div class="rect5" style="margin-left:5px;"></div>
            </div>
        </div>
    </div>
    <div class="left">
        <div class="backButton">返回</div>
        <div id="voipCtrl">
            <div style="width:100%;height:100px;padding-top:25px;">
                <div id="voipCalling"
                     style="width:75px;height:75px;margin:0 auto;background-image: url(images/call.jpg);background-size: cover;cursor:pointer;">
                </div>
            </div>
            <div style="width:100%;height:100px;padding-top:25px;">
                <div id="voipHangup"
                     style="width:75px;height:75px;margin:0 auto;background-image: url(images/hangup.jpg);background-size: cover;cursor:pointer;">
                </div>
            </div>
        </div>
    </div>
    <div class="right">
        <div id="voipTargetIdInputWrapper" class="title" style="height:70px;padding:0px;">
            <input id="targetUserId" type="text"
                   style="width: 100%;height: 100%;background: whitesmoke;padding: 0;border-width: 0;text-align: center"
                   placeholder="点击这里 输入对方ID"/>
        </div>
        <div id="voipZone" style="width:100%;height:100%">
            <div id="voipVideoZone" style="width:100%;height:100%">
                <div class="" style="width:100%;height:100%;position:relative;">
                    <div id="voipCanvas" style="width:100%;height:100%;z-index=1000;position:absolute;top:0px;left:0px;">
                        <canvas id="voipMyCanvas" style="width:100%;height:100%">
                        </canvas>
                    </div>
		    <!--
                    <video id="voipSmallVideo" muted style="width:15%;max-height:100%;float:left"></video>
		    -->
		    <video id="voipBigVideo" style="width:100%;height:100%"></video>
                    <audio id="voipBigAudio" autoplay style="width:100%;height:100%"/>
                </div>
            </div>
            <div id="voipMsgWindow" style="width:15%;height:100%;float:right;position:relative;">
            </div>
            <div id="voipMessageButton" class="messageButton" style="display:none">
					<span class="svg-icon flat-line" id="line-email">
						<span class="svg-icon flat-line" id="line-message"><svg class="flat_icon"
                                                                                xmlns="http://www.w3.org/2000/svg"
                                                                                width="100px" height="100px"
                                                                                viewBox="0 0 100 100">
								<path class="circle"
                                      d="M50,2.125c26.441,0,47.875,21.434,47.875,47.875c0,26.441-21.434,47.875-47.875,47.875C17.857,97.875,2.125,76.441,2.125,50C2.125,23.559,23.559,2.125,50,2.125z">
								</path>
								<g class="icon">
									<path class="back"
                                          d="M75.139,28.854h-3.807l-8.125-8.125c-0.381-0.38-0.999-0.382-1.381,0l-8.124,8.125H36.428c-2.79,0-5.05,2.261-5.05,5.048v25.247c0,2.79,2.26,5.051,5.05,5.051h38.711c2.789,0,5.05-2.261,5.05-5.051V33.902C80.188,31.115,77.928,28.854,75.139,28.854z">
									</path>
									<path class="front"
                                          d="M63.571,35.8H24.862c-2.789,0-5.05,2.262-5.05,5.049v25.247c0,2.788,2.261,5.049,5.05,5.049h3.806l8.125,8.125c0.382,0.381,1,0.383,1.381,0l8.125-8.125h17.275c2.788,0,5.05-2.261,5.05-5.049V40.85C68.62,38.062,66.361,35.8,63.571,35.8z">
									</path>
									<path class="dots"
                                          d="M34.743,50.108c-1.858,0-3.365,1.507-3.365,3.366c0,1.86,1.506,3.367,3.365,3.367c1.86,0,3.367-1.507,3.367-3.367C38.109,51.615,36.603,50.108,34.743,50.108z M44.842,50.108c-1.858,0-3.367,1.507-3.367,3.366c0,1.86,1.507,3.367,3.367,3.367c1.859,0,3.366-1.507,3.366-3.367C48.208,51.615,46.701,50.108,44.842,50.108z M54.94,50.108c-1.857,0-3.365,1.507-3.365,3.366c0,1.86,1.506,3.367,3.365,3.367c1.86,0,3.366-1.507,3.366-3.367C58.307,51.615,56.8,50.108,54.94,50.108z">
									</path>
								</g>
							</svg></span>
					</span>
            </div>
        </div>
    </div>
</div>
</body>
</html>
